<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">优惠券列表</block>
		</cu-custom>
		<view class="padding">
			<view class="navList bg-white radius-xl padding-xs">
				<u-sticky bgColor="#fff">
					<u-tabs :list="navList" @click="navClick" keyName="name" :scrollable="false"
						lineColor="var(--theme-color)" :activeStyle="{ color: 'var(--theme-color)', fontWeight: 'bold' }">
					</u-tabs>
				</u-sticky>
			</view>
		</view>
		<view class="padding padding-top-0 list" v-if="list.length > 0 || pageLoading">
			<view class="item padding bg-white radius-xl margin-bottom coupon" v-for="(item, index) in list" :key="index">
				<view class="money-text text-center solid-right padding-right">
					<view class="money text-red">
						<text class="text-sm">￥</text>
						<text class="number text-bold">{{ item.money }}</text>
					</view>
					<view class="text-red text-sm">
						最高可减
					</view>
				</view>
				<view class="right crow">
					<view class="nameBox margin-left">
						<view class="name text-black text-bold padding-bottom-xs">
							{{ item.title }}
						</view>
						<view class="min text-gray padding-bottom-xs">
							<text class="text-sm text-gray" v-if="item.use_type === 'FULL_DEC'">满{{ item.full_money
							}}可用</text>
							<text class="text-sm text-gray" v-else-if="item.use_type === 'DEC'">无门槛</text>
						</view>
						<view class="min text-gray" v-if="item.end_time">
							有效期至 {{ item.end_time }}
						</view>
					</view>
					<view class="linqu">
						<button class="cu-btn bg-green sm round shadow" @tap="$utils.$page.switch('/pages/index/index')"
							v-if="item.state === 0">去使用</button>
						<button class="cu-btn bg-grey sm round shadow" v-else-if="item.state === 1">已使用</button>
						<button class="cu-btn bg-danger sm round shadow" v-else-if="item.state === 99">已过期</button>
					</view>
				</view>
			</view>
		</view>
		<emptyData type="notData" top="10" v-else text="暂无优惠券"></emptyData>
		<loading v-if="pageLoading" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageLoading: false,
			navList: [
				{ name: '未使用', scene: 'unused' },
				{ name: '已使用', scene: 'used' },
				{ name: '已过期', scene: 'expired' },
			],
			search: {
				page: 1,
				state: 'unused',
			},
			list: []
		};
	},
	onLoad() {
		this.getList();
	},
	onReachBottom() {
		this.search.page++;
		this.getList();
	},
	methods: {
		navClick(e) {
			this.search.state = e.scene;
			this.list = [];
			this.search.page = 1;
			this.getList();
		},
		getList() {
			this.pageLoading = true;
			this.$utils.$api.Coupon.list(this.search).then(data => {
				this.list = [...this.list, ...data.data];
			}).catch(() => {
			}).finally(() => {
				this.pageLoading = false;
			})
		}
	}
}
</script>

<style lang="less" scoped>
.list {
	.item {
		position: relative;
		display: flex;
		align-items: center;

		.money-text {
			width: 170upx;

			.money {
				.number {
					font-size: 40upx;
				}
			}
		}

		.right {
			flex: 1;
			justify-content: space-between;

			.nameBox {
				.name {
					font-size: 30upx;
				}

				.min {
					font-size: 24upx;
				}
			}
		}
	}
}
.cu-btn {
	white-space: nowrap;
}
.coupon::before,
.coupon::after {
	content: "";
	position: absolute;
	background-color: #f5f5f7;
	width: 20upx;
	height: 20upx;
}

.coupon::before {
	top: 0;
	right: 25%;
	border-radius: 0 0 50% 50%;
}

.coupon::after {
	bottom: 0;
	right: 25%;
	border-radius: 50% 50% 0 0;
	/* 底部两个半圆 */
}</style>
